<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">个人资料</block>
		</cu-custom>
		<free-list-item title="头像" showRight :showLeftIcon="false"
		@click="update('avatar')">
			<free-avater slot="right" :src="user.avatar"></free-avater>
		</free-list-item>
		<free-list-item title="昵称" showRight :showLeftIcon="false"
		@click="update('nickname')">
			<text slot="right" class="font text-muted">{{user.nickname}}</text>
		</free-list-item>
		<free-list-item title="性别" showRight :showLeftIcon="false"
		@click="showGender = true" >
			<text slot="right" class="font text-muted">{{user.sex}}</text>
		</free-list-item>
		<free-list-item title="地区" showRight :showLeftIcon="false"
		@click="showRegion = true" >
			<text slot="right" class="font text-muted">{{user.area}}</text>
		</free-list-item>
		<free-list-item title="账号" showRight :showLeftIcon="false">
			<text slot="right" class="font text-muted">{{user.username||user.nickname}}</text>
		</free-list-item>
		<free-list-item title="二维码名片" showRight :showLeftIcon="false"
		@click="openCode">
			<text slot="right" class="iconfont font-md">&#xe7ad;</text>
		</free-list-item>
		<free-list-item title="个性签名" showRight :showLeftIcon="false" 
		@click="showSign = true">
			<text slot="right" class="font text-muted">{{user.sign}}</text>
		</free-list-item>
		
		<free-confirm ref="confirm" :title="confirmTitle">
			<input type="text" v-model="confirmText" :placeholder="placeholder" class="border-bottom font-md"/>
		</free-confirm>
		<view class="f-fixed">
			<q-button @click="outlogin" class="text-white">退出登录</q-button>
		</view>
		<!-- 性别选择 -->
		<q-select v-model="showGender" :list="gender" @confirm="saveGender"></q-select>
		<!-- 地区选择 -->
		<u-picker mode="region" v-model="showRegion" :params="params" @confirm="saveRegion"></u-picker>
		<!-- 个性签名 -->
		<u-modal v-model="showSign" :content="content" :title="title" show-cancel-button="true" @confirm="saveSign">
			<view class="slot-content">
				<u-input type="textarea" v-model="sign" height="100" auto-height="true" :border="border" placeholder="请填写个性签名" maxlength="30"  />
			</view>
		</u-modal>
	</view>
</template>

<script>
	const app = getApp();
	import freeAvater from '@/components/free-ui/free-avater.vue';
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeConfirm from '@/components/free-ui/free-confirm.vue';
	import { mapState } from 'vuex'
	import $R from '@/common/free-lib/request.js'
	export default {
		components: {
			freeAvater,
			freeListItem,
			freeConfirm
		},
		data() {
			return {
				showGender:false,
				showRegion:false,
				showSign:false,
				title:'修改个性签名',
				border: true,
				sign:'',
				gender:[
					{
						lable:"男",
						value:1
					},
					{
						lable:"女",
						value:2
					},
					{
						lable:"保密",
						value:0
					}
				],
				params:{
					province: true,
					city: true,
				},
				confirmText:"",
				confirmType:""
			}
		},
		created() {
			this.sign = this.user.sign
		},
		computed: {
			...mapState({
				user:state=>state.user.user
			}),
			confirmTitle() {
				return this.confirmType == 'username' ? '修改账号' :'修改昵称' 
			},
			placeholder(){
				return this.confirmType == 'username' ? '输入账号' :'输入昵称' 
			}
		},
		methods: {
			// 修改性别
			saveGender(index){				
				let gender = this.gender[index[0]].value;
				this.$C.post('/user/update',{
					avatar:this.user.avatar,
					nickname:this.user.nickname,
					sex:gender
				}).then(res=>{
					this.$store.commit('updateUser',{
						k:'sex',
						v:this.gender[index[0]].lable
					})
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
				
				})
			},
			//修改地区
			saveRegion(e){
				let input = e.province.label + e.city.label;
				this.$C.post('/user/update',{
					avatar:this.user.avatar,
					nickname:this.user.nickname,
					sex:this.user.sex,
					area:input
				}).then(res=>{
					this.$store.commit('updateUser',{
						k:'area',
						v:input
					})
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
				})	
				
			},
			//修改个性签名
			saveSign(e){
				this.$C.post('/user/update',{
					avatar:this.user.avatar,
					nickname:this.user.nickname,
					sex:this.user.sex,
					area:this.user.area,
					sign:this.sign
				}).then(res=>{
					this.$store.commit('updateUser',{
						k:'sign',
						v:this.sign
					})
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
				})	
			},
			
			update(key){
				switch (key){
					case 'avatar':
					uni.chooseImage({
						count:1,
						sizeType: ['compressed'],
						success: (res) => {
							// 上传
							this.$C.upload('/upload',{
								filePath:res.tempFilePaths[0]
							}).then(url=>{
								this.$C.post('/user/update',{
									avatar:url,
									nickname:this.user.nickname
								}).then(res=>{
									uni.showToast({
										title: '修改头像成功',
										icon: 'none'
									});
									this.$store.commit('updateUser',{
										k:'avatar',
										v:url
									})
								})
							})
						}
					})
						break;
					default:
					this.confirmType = key
					this.confirmText = this.user[key]
					this.$refs.confirm.show((close)=>{
						if(this.confirmText === ''){
							return uni.showToast({
								title: '不能为空',
								icon: 'none'
							});
						}
						this.$C.post('/user/update',{
							avatar:this.user.avatar,
							nickname:this.confirmText
						}).then(res=>{
							this.$store.commit('updateUser',{
								k:'nickname',
								v:this.confirmText
							})
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							});
						})
						close()
					})
						break;
				}
			},
			openCode(){
				uni.navigateTo({
					url: 'code?params='+encodeURIComponent(JSON.stringify({
						id:this.user.id,
						name:this.user.nickname || this.user.username,
						avatar:this.user.avatar,
						area:this.user.area
					}))+'&type=user',
				});
			},
		//退出登录
			outlogin() {
				$R.post('/logout').then(res=>{
					uni.showToast({
						title: '退出登录成功',
						icon: 'none',
						duration:2000
					});
					this.$store.dispatch('logout')
					// 跳转到登录页
					uni.reLaunch({
						url:"../login"
					})
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content {
		font-size: 28rpx;
		margin: 20rpx;
	}
</style>
